import '@wangeditor/editor/dist/css/style.css' // 引入 css

import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import styled from '../../views/sandbox/news-manage/css/Newsadd.module.css'

function Myeditor(props) {
    const [editor, setEditor] = useState(null) // 存储 editor 实例
    const [html, setHtml] = useState('') // 编辑器内容
    let {currentIndex, getarticlevalue, newContent} = props

    const toolbarConfig = {
        excludeKeys: [
        ]
    }
    const editorConfig = {
        placeholder: '请输入内容...',
    }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        setHtml(newContent)
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor, newContent])

    return (
        <div className={currentIndex === 1? '':styled.hidden} onBlur={()=>{
            getarticlevalue(html)
        }}>
            <div style={{ border: '1px solid #ccc', zIndex: 100}}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '18rem', 'overflowY': 'hidden' }}
                />
            </div>
        </div>
    )
}

export default Myeditor